<template>
  <div>
    <div class="headerCon">
      <el-row>
        <el-col :span="3">
          <span class="logo">阳光沙滩-劵场</span>
        </el-col>
        <el-col :span="21">
          <a href="/" :class="['chooseNav', logoNavIndex===0?'acive':'']" target="_blank">劵场</a>
          <a href="/discovery" :class="['chooseNav', logoNavIndex===1?'acive':'']" target="_blank">发现</a>
          <a href="/onsell" :class="['chooseNav', logoNavIndex===2?'acive':'']" target="_blank">特惠</a>
          <el-input class="searchTxt" size="mini" v-model.trim="keyword" placeholder="复制淘宝关键字查找优惠券"></el-input>
          <span class="goSearch" @click="goSearch">搜索</span>
        </el-col>
      </el-row>
    </div>

    <div class="nuxtCon">
      <nuxt></nuxt>
    </div>

    <div class="footerCon">
      <ul>
        <li>联系我们</li>
        <li>人才招聘</li>
        <li>广告招聘</li>
        <li>网点加盟</li>
        <li>常见问题</li>
        <li>友情链接</li>
      </ul>
      <div>@2019 taobaounion 奥IPC备 1209832-11 code by TrillGates</div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        keyword: '',   // 搜索内容
      }
    },
    computed: {
      ...mapState(['logoNavIndex']),
    },
    mounted(){
      let {keyword} = this.$route.query;
      this.keyword = keyword;
    },
    methods: {
      goSearch(){
        window.open('/search?keyword=' + this.keyword);
      }
    }
  };
</script>

<style scoped lang="scss">
  .headerCon{
    box-shadow: 0 3px 3px #ccc;

    .el-row{
      width: 1170px;
      margin: -1px auto 0;
      height: 61px;
      line-height: 61px;
      overflow: hidden;

      .el-col{
        span{
          font-weight: 900;
        }

        .logo{
          color: red;
          font-size: 20px;
        }

        .chooseNav{
          display: inline-block;
          padding: 0 10px;
        }
        .acive {
          background-color: #eee;
        }
        .searchTxt{
          width: 400px;
          margin-right: 20px;
        }

        .goSearch{
          background-color: red;
          padding: 4px 20px;
          font-size: 14px;
          color: #fff;
          border-radius: 4px;
        }
      }
    }
  }

  .nuxtCon{
    width: 1170px;
    min-height: 500px;
    margin: 0 auto;
  }

  .footerCon{
    background-color: red;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    ul{
      display: flex;
      justify-content: center;

      li{
        padding: 20px;
      }
    }
    div{
      padding-bottom: 20px;
    }
  }


</style>
